.cloudBox {
    position: relative;
    >div {
        position: absolute;
    }
    .cloud {
        left: 40%;
        bottom: 30%;
        width: 20%;
        height: 50%;
        background: url('./images/cloud.png') no-repeat;
        background-size: 100% 100%;
        font-weight: 'Regular';
        z-index: 1;
        animation: diamond-up 3s linear infinite;
        >p {
            margin: 0;
            text-align: center;
            // overflow: hidden;
        }
        .title {
            height: 40px;
            font-size: 24px;
            color: #8FEFF5;
            margin-top: 18%;
        }
        .number {
            font-size: 60px;
            color: #CCFFFC;
            font-family: 'myNumberFamily';
            margin: 3% 0;
        }
    }

    .cloudCard {
        width: 20%;
        height: 45%;
        font-weight: 'Regular';
        // animation: diamond-up 3s linear infinite;
        >p {
            margin: 0;
            text-align: center;
            overflow: hidden;
        }
        .title {
            height: 35px;
            line-height: 35px;
            font-size: 24px;
            color: #22BBE9;
        }
        .number {
            height: 40px;
            line-height: 40px;
            font-size: 48px;
            color: #CCFFFC;
            font-family: 'myNumberFamily';
            margin: 2% 0;
        }
        .icon {
            width: 34px;
            height: 70%;
            margin-left: 35%;
            // background: url('./images/light-tree.png') no-repeat;
            // background-size: 100% 100%;
        }
    }
}


@keyframes diamond-up {
    25% {
        transform: translateY(20px);
    }
    50%{
        transform: translateY(0);
    }
    75% {
        transform: translateY(-20px);
    }
    100% {
        transform: translateY(0);
    }
}